<template>
	<view class="content">
		<view class="nav-top" :style="{paddingTop: `${marginTop}px`}">			
			<view class="logo-container">
				<image src="/static/logo-mini.png" class="logo-img"></image>
				<image src="/static/title.png" class="logo-title" mode="heightFix"></image>
				<view class="logo-divider" v-if="data.slogn"></view>
				<text class="logo-slogn" v-if="data.slogn">{{data.slogn}}</text>
			</view>
			
			<view class="header">
				<view class="search-service flex-b">
					<view class="input-search-box" @click.prevent="clickSearch">
						<view class="search-img">
							<u-icon name="search" color="#606266" size="20"></u-icon>
						</view>
						<input class="input-search" placeholder="请输入您要回收的产品" />
						<view class="search-btn">搜索</view>
					</view>
					<view class="service-fu-btn" @click="clickKefu" v-if="!onlineAudit">
						<u-icon name="kefu-ermai" color="#333" size="20"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<scroll-view scroll-y enable-back-to-top show-scrollbar="false"
			:style="{height: `calc(100vh - ${marginTop + 143 + bottomHeight}px)`}">
			<view class="content-index">
				<view class="type-box" :style="{}">
					<view class="type-item" v-for="(item, index) in data.menu" :key="index"
						@click="clickMenu(item)">
						<view>
							<image :src="baseUrl(item.icon)" class="type-img" :mode="onlineAudit ? 'aspectFill' : 'heightFix'"
								:style="{borderRadius: onlineAudit ? '12px' : ''}"></image>
						</view>
						<view class="type-name">{{item.name}}</view>
					</view>
				</view>
				<view class="scroll-x flex-a" v-if="data.notice">
					<view class="notice">
						<image src="/static/notice.png" mode="widthFix" class="notice-icon"></image>
					</view>
					<u-notice-bar :text="data.notice" :icon="null" color="#333" bgColor="#00000000" speed="30"></u-notice-bar>
				</view>
				<image class="banner-img" :src="baseUrl(data.banner.img)" mode="widthFix" v-if="data.banner.img"></image>
				<view class="card-box">
					<view class="hot-name">
						热门产品
						<view class="line"></view>
						<view class="more" @click="toCategory()">
							更多分类
							<u-icon name="arrow-right" color="#999" size="14"></u-icon>
						</view>
					</view>
					<view class="cards">
						<view class="card-item" v-for="(item, index) in data.hot" :key="index"
							@click="clickCard(item)">
							<view>
								<image class="card-img" :src="baseUrl(item.icon)"></image>
							</view>
							<view class="card-dot1"></view>
							<view class="card-dot2"></view>
							<view class="card-info">
								<view class="card-name">{{item.name}}</view>
								<view class="card-price" v-if="item.max_discount">{{item.max_discount.toFixed(1)}}折回收</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="keep-record">{{data.keep_record}}</view>
			</view>
		</scroll-view>
		<my-tabbar></my-tabbar>
	</view>
</template>

<script>
	import { systemInfo } from '@/utils/mixin';
	import { baseUrl, getIndexData, refreshToken } from '@/api';
	import { customerService } from '@/utils/service';
	import token from '@/utils/token';
	import {mapState, mapGetters} from "vuex";
	import system from '../../utils/system';
	
	export default {
		mixins: [systemInfo],
		data() {
			return {
				marginTop: 0,
				baseUrl,
				data: {
					notice: '',
					menu: [],
					hot: [],
					adv: [],
					banner: [],
					keep_record: ''
				},
				steps: [
					{
						action() {
							this.toCategory()
						}
					},
					{
						action() {
							if (token.check()) return;
							
							uni.navigateTo({
								url:'/pages/real-name/index'
							})
						}
					},
					{
						action() {
							uni.navigateTo({
								url:'/pages/order/index'
							})
						}
					},
					{
						action() {
							if (token.check()) return;
							
							uni.navigateTo({
								url:'/pages/withdraw/index'
							})
						}
					}
				],
			}
		},
		onLoad(params) {
			system.setAlipayAdParams(params);
			// #ifdef MP-ALIPAY
			uni.hideTabBar();
			// #endif
			this.getSystemInfo();
			if (this.statusBarHeight < 10) {
				this.marginTop = 10;
			} else {
				// #ifdef MP-WEIXIN
				this.marginTop = this.statusBarHeight + 14;
				// #endif
				// #ifndef MP-WEIXIN
				this.marginTop = this.statusBarHeight;
				// #endif
			}
			
		},
		onShow() {
			this.loadData();
			this.$store.state.tabIndex = 0;
		},
		computed: mapState(['onlineAudit']),
		methods: {
			async loadData() {
				const res = await getIndexData(this.platform, this.version);
				this.data = res.data;
				this.$store.state.onlineAudit = this.data.online_audit;
			},
			clickSearch() {
				uni.navigateTo({
					url:'/pages/search/index'
				})
			},
			clickKefu() {
				customerService.openChat()
			},
			clickMenu(item) {
				uni.navigateTo({
					url:`/pages/detail/index?categoryId=${item.id}`
				})
			},
			clickCard(item) {
				uni.navigateTo({
					url:`/pages/detail/index?cardId=${item.id}`
				})
			},
			clickStep(step) {
				step.action.bind(this).call()
			},
			toCategory() {
				uni.navigateTo({
					url:'/pages/category/index'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content-index {
		padding-left: 14px;
		padding-right: 14px;
	}
	
	.content {
		position: relative;
		background: linear-gradient($main-color 68px, $bg-color);
		background-repeat: no-repeat;
		background-size: 100% 160px;
	}

	.nav-top {
		position: relative;
		width: 100%;
		
		.logo-container {
			margin-left: 14px;
			display: flex;
			align-items: center;
			gap: 6px;
			
			.logo-img {
				width: 25px;
				height: 25px;
			}
			
			.logo-title {
				height: 16px;
			}
			
			.logo-divider {
				width: 0px;
				height: 19px;
				border: 1px solid rgba(0, 0, 0, 0.4);
			}
			
			.logo-slogn {
				font-size: 16px;
				font-weight: 700;
				letter-spacing: 0px;
				line-height: 23.17px;
				color: rgba(51, 51, 51, 0.6);
			}
		}
	}

	.header {
		position: relative;
		width: 100%;
		padding: 16px 14px;
		box-sizing: border-box;
		
		.search-service {
			display: flex;
			.input-search-box {
				flex: 1;
				border-radius: 99px;
				background: #fff;
				display: flex;
				align-items: center;
				
				.search-img {
					margin-top: 8px;
					margin-bottom: 6px;
					margin-left: 12px;
					margin-right: 4px;
				}
			
				.input-search {
					flex: 1;
					font-size: 12px;
					font-weight: 400;
					letter-spacing: 0px;
					line-height: 16.46px;
				}
			
				.search-btn {
					margin: 4px;
					padding: 4px 14px;
					border-radius: 40px;
					font-size: 14px;
					background: $main-color;
					text-align: center;
				}
			}
			
			.service-fu-btn {
				width: 35px;
				height: 35px;
				margin-left: 7px;
				box-shadow: 0 0 3px 1px rgba(0, 0, 0, .1);
				border-radius: 100%;
				box-sizing: border-box;
				background-color: #fff;
				display: flex;
				justify-content: center;
			}
		}
	}

	.type-box {
		display: flex;
		flex-wrap: wrap;
		padding: 10px 4px;
		opacity: 1;
		border-radius: 10px;
		background: #fff;

		.type-item {
			width: 23%;
			margin: 5px 1% 5px 1%;
			padding: 0;
			text-align: center;
			border-radius: 8px;
			background-color: #fff;

			.type-img {
				width: 54px;
				height: 54px;
			}

			.type-name {
				margin: 3px;
				font-size: 12px;
				font-weight: 700;
				letter-spacing: 0px;
				line-height: 16.46px;
				color: #333;
				text-align: center;
				vertical-align: top;
			}
		}
	}

	.scroll-x {
		margin: 10px 0;
		position: relative;
		border-radius: 10px;
		background: #fff;
		display: flex;
		align-items: center;
		z-index: 13;
		
		.notice {
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			border-radius: 10px;
			background: #fff;
			z-index: 13;
			
			.notice-icon {
				width: 27px;
				margin-top: 6px;
				margin-bottom: 6px;
				margin-left: 15px;
				margin-right: 3px;
			}
		}
	}
	
	.banner-img {
		width: 100%;
		border-radius: 10px;
	}

	.card-box {
		margin: 10px 0;

		.hot-name {
			font-size: 16px;
			font-weight: 500;
			letter-spacing: 0px;
			line-height: 21.95px;
			color: #000;
			position: relative;
			
			.line {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 33px;
				height: 3px;
				opacity: 1;
				background: $main-color;
			}

			.more {
				float: right;
				font-size: 12px;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 16.46px;
				color: $hint-color;
				display: flex;
			}
		}

		.cards {
			display: flex;
			flex-wrap: wrap;
			margin: 7px -5px;

			.card-item {
				flex: 0 0 calc(50% - 8px);
				margin: 5px 4px;
				border-radius: 10px;
				background: #fff;
				display: flex;
				align-items: center;
				position: relative;

				.card-img {
					margin: 10px;
					width: 44px;
					height: 44px;
					border-radius: 6px;
				}
				
				.card-dot1 {
					position: absolute;
					left: 71px;
					top: -6px;
					width: 12px;
					height: 12px;
					border-radius: 12px;
					background: $bg-color;
				}
				
				.card-dot2 {
					position: absolute;
					left: 71px;
					bottom: -6px;
					width: 12px;
					height: 12px;
					border-radius: 12px;
					background: $bg-color;
				}

				.card-info {
					margin-left: 10px;

					.card-name {
						font-size: 14px;
						font-weight: 500;
						letter-spacing: 0px;
						line-height: 19.21px;
						color: var(--text-color);
					}

					.card-price {
						font-size: 12px;
						font-weight: 400;
						letter-spacing: 0px;
						line-height: 16.46px;
						color: rgba(230, 60, 60, 1);
					}
				}
			}
		}
	}
	
	.keep-record {
	    text-align: center;
	    color: #999;
	    font-size: 12px;
	    padding: 0 0 10px 0;
	}
</style>